<template>
  <div class="tabs">
    <el-tabs class="tabs_content" type="card" editable v-model="activeKey" @edit="removeTabs" @tab-click="tabsActive"
             @contextmenu.prevent.stop="tabsClickRight">
      <el-tab-pane class="tabs_view" v-for="item in tabsViewList" :key="item.path" :name="item.path"
                   :label="item.meta.title"></el-tab-pane>
    </el-tabs>
<!--    <div class="tabs_handle">-->
<!--      <el-dropdown>-->
<!--        <el-button size="mini">更多-->
<!--          <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--        </el-button>-->
<!--        <template #dropdown>-->
<!--          <el-dropdown-menu>-->
<!--            <el-dropdown-item @click="tabsOtherDelete"><i class="el-icon-refresh-right "></i> 关闭其他</el-dropdown-item>-->
<!--            <el-dropdown-item @click="tabsLeftDelete"><i class="el-icon-arrow-left "></i> 关闭左侧</el-dropdown-item>-->
<!--            <el-dropdown-item @click="tabsRightDelete"><i class="el-icon-arrow-right "></i> 关闭右侧</el-dropdown-item>-->
<!--            <el-dropdown-item @click="tabsAllDelete"><i class="el-icon-close"></i> 全部关闭</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </template>-->
<!--      </el-dropdown>-->
<!--    </div>-->
    <transition name="el-fade-in">
      <el-card v-show="handleShow" :style="handleStyle" class="handle_list" :body-style="{padding:0}">
        <ul>
          <li @click="tabsOtherDelete"><i class="el-icon-refresh-right "></i> 关闭其他</li>
          <li @click="tabsLeftDelete"><i class="el-icon-arrow-left "></i> 关闭左侧</li>
          <li @click="tabsRightDelete"><i class="el-icon-arrow-right "></i> 关闭右侧</li>
          <li @click="tabsAllDelete"><i class="el-icon-close"></i> 全部关闭</li>
        </ul>
      </el-card>
    </transition>
  </div>
</template>

<script>
import {defineComponent, ref, computed, onMounted, watch, reactive} from 'vue'
import {useStore} from 'vuex'
import {useRoute, useRouter} from 'vue-router'

export default defineComponent({
  name: "TabsPane",
  setup() {
    const routes = useRoute()
    const router = useRouter()
    const store = useStore()
    const tabsViewList = computed(() => store.getters.getTabsView)
    const activeKey = ref('')
    const handleStyle = reactive({
      top: 0,
      left: 0
    })
    const handleShow = ref(false)
    // 标签切换
    const tabsActive = (value) => {
      const findRoutes = tabsViewList.value.find(item => item.path === value.paneName)
      router.push({
        path: findRoutes.path,
        query: {
          ...findRoutes.query
        }
      })
    }
    const action = () => {
      activeKey.value = routes.path
      if (!store.state.tabsViewList.some(item => item.path === routes.path)) {
        store.dispatch('add_Tabs', routes)
      }
    }
    // 监听路由改变
    watch(() => routes.path, () => {
      action()
    })
    // 单个删除
    const removeTabs = (value) => {
      // 当前高亮页面
      if (activeKey.value === value) {
        store.dispatch('remove_Tabs', [value])
        if (tabsViewList.value.length !== 0) {
          router.push({
            path: tabsViewList.value[tabsViewList.value.length - 1].path,
            query: {
              ...tabsViewList.value.query
            }
          })
        } else {
          router.push('/index')
        }
      } else {
        store.dispatch('remove_Tabs', [value])
      }
    }
    // 删除全部
    const tabsAllDelete = () => {
      store.dispatch('remove_Tabs', [])
      router.push('/index')
    }
    // 关闭右侧
    const tabsRightDelete = () => {
      directionDelete('right')
    }
    // 关闭左侧
    const tabsLeftDelete = () => {
      directionDelete('left')
    }
    // 关闭其他
    const tabsOtherDelete = () => {
      const tabsView = tabsViewList.value.map(item => item.path)
      // 过滤当前高亮tabs
      const value = tabsView.filter(item => item !== activeKey.value)
      if (value.length) {
        store.dispatch('remove_Tabs', value)
      }
    }
    // 关闭左右侧
    const directionDelete = (type) => {
      const tabsView = tabsViewList.value.map(item => item.path)
      // 获取当前高亮的下标
      const index = tabsView.indexOf(activeKey.value)
      const value = tabsView.filter((item, key) => {
        return type === 'left' ? index > key : index < key
      })
      if (value.length) {
        store.dispatch('remove_Tabs', value)
      }
    }
    const tabsClickRight = (e) => {
      handleShow.value = true
      handleStyle.top = (e.pageY + 10) + 'px'
      handleStyle.left = (e.pageX + 10) + 'px'
    }
    onMounted(() => {
      action()
      document.body.addEventListener('click', () => {
        handleShow.value = false
      })
    })
    return {
      tabsRightDelete,
      tabsOtherDelete,
      tabsLeftDelete,
      tabsActive,
      tabsAllDelete,
      activeKey,
      tabsViewList,
      removeTabs,
      tabsClickRight,
      handleShow,
      handleStyle
    }
  }
})
</script>

<style scoped lang="less">

.tabs {
  width: 100%;
  margin-top: 5px;
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  max-width: 100%;

  ::v-deep .el-tabs__header {
    border: 0px;
    margin: 0 !important;
  }

  .tabs_content {
    flex: 1;
    white-space: nowrap;
    padding: 3px 10px;
    box-sizing: border-box;
    overflow: hidden;

    .tabs_view {
      background-color: #ffffff;
      margin-right: 10px;
      border-radius: 5px;
      padding: 8px 8px;
      box-sizing: border-box;
      display: inline-block;
      cursor: pointer;
      font-size: 14px;

      .close {
        margin-left: 5px;
      }
    }

    .tabs_view:hover {
      color: #409eff;
    }

    .tabs_active {
      background-color: #409eff;
      color: #ffffff !important;
      transition: all .2s;
    }
  }


  ::v-deep .el-tabs__item {
    background-color: #ffffff !important;
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid #dcdfe6;
    height: 28px !important;
    line-height: 28px !important;
  }

  ::v-deep .el-tabs__item:hover {
    border: 1px solid #409eff !important;
    padding: 0 20px !important;
  }

  ::v-deep .el-tabs__item.is-active.is-closable {
    background-color: #e8f4ff !important;
    border: 1px solid #409eff !important;
  }

  ::v-deep .el-tabs__new-tab {
    display: none;
  }

  ::v-deep .el-icon-close {
    width: 14px !important;
  }

  ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: 0px !important;
  }

  ::v-deep .el-tabs__nav-next {
    line-height: 28px !important;
  }

  ::v-deep .el-tabs__nav-prev {
    line-height: 28px !important;
  }

  ::v-deep .el-tabs__content {
    display: none;
  }

  .tabs_handle {
    margin: 0 6px;
    line-height: 40px;
  }

  .handle_list {
    position: absolute;
    z-index: 999;

    ul {
      list-style: none;
      margin: 0;
      padding: 10px 0;
      font-size: 14px;
      li {
        padding: 5px 15px;
        cursor: pointer;
      }

      li:hover {
        background-color: #e8f4ff;
        color: #409eff;
      }
    }
  }
}
</style>
